<template>
  <div class="author">
    <van-list
        v-model="loading"
        :finished="finished"
        :immediate-check="false"
        :finished-text="authorList.length == 0 ? '暂无数据' : '没有更多了'"
        @load="getDataList">
        <div class="author-list" v-for="(item,index) in authorList" :key="index" @click="gotoPersonal(item)">
            <div class="author-l">
                <div style="width:52px">
                    <div class="avatar" :style="{backgroundImage: `url(${item.avatar ? store.state.imgUrl + item.avatar : logo})`}"></div>
                      <!-- <van-image
                        width="52px"
                        height="52px"
                        round
                        :src="item.avatar ? store.state.imgUrl + item.avatar : logo"/> -->
                </div>
                <div class="author-info">
                    <div class="info-name"><span>{{item.name}}</span> <i :class="item.sex ? ( item.sex === '1' ? 'el-icon-male' : 'el-icon-female') : '' " :style="item.sex ? (item.sex === '1' ?'color:#3588e5' : 'color:#ff0099') : ''"></i></div>
                </div>
            </div>
            <div class="btn" v-if="!item.isAttention" @click.stop="handleAttention(item.userId,index)">
                <i class="el-icon-plus" style="font-size:12px;margin-right:5px"></i>
                <span>关注</span>
            </div>
            <div class="btnFollow" v-if="item.isAttention" @click.stop="handleAttention(item.userId,index)">
                <span>已关注</span>
            </div>
        </div>
    </van-list>
  </div>
</template>

<script>
import {userSearchApi,addAuthorLikeApi} from '@/api/share.js'
import store from '@/store'
import {antiShake} from '@/utils/antie.js'//防抖函数
import {Dialog} from 'vant';
export default {
    props: {
      searchValue: {
        type: String,
        default: null
      },
       token: {
        type: String,
        default: null
      }
  },
    data(){
        return{
            logo: require("@/assets/tx.png"),
            loading:false,
            headImg:require("@/assets/search/img.jpg"),
            authorList:[],
            dataList:[],
            finished:false,
            current:1,
            store:store
        }
    },
    created(){
        // if (this.searchValue) {
           this.getDataList()
        // }
    },
    mounted(){

    },
    methods:{
        init(){
            this.authorList = []
            this.current = 1
            this.finished = false
             this.getDataList()
        },
        getDataList(){//作者搜索记录
          
          if (this.searchValue) {
            this.loading = true
             userSearchApi(
                {
                    search:this.searchValue ,
                    size:10,
                    current:this.current,
                    token:this.token
                }
            ).then((res)=>{
                // this.loading = false;
                // this.authorList = [...this.authorList, ...res.data.records];
                //     if (res.data.records.length < 1) {
                //    // 将finished设置为true,表示所有数据加载完毕
                //     this.finished = true;
                // }
                if (res.data.records !== null) {
              this.authorList.push(...res.data.records)
              // 3. 加载结束
              this.loading = false
              if (res.data.records.length >= 10) {
                this.current += 1
              } else {
                this.finished = true
              }
              
          } else {
              this.finished = true
          }
            })
          }else{
             this.authorList = []
             this.loading = false
             this.finished = true;
          }  
        },
        // 关注
        handleAttention: antiShake( function (id,index){//关注/取消关注
            console.log(this.authorList[index].isAttention)
            if (this.authorList[index].isAttention == 0) {
                let data = {
                    id:id,
                    token:this.token
                }
                addAuthorLikeApi(data).then((res)=>{
                    this.authorList[index].isAttention = !this.authorList[index].isAttention
                    this.$toast.success("关注成功")
                })
            } else if (this.authorList[index].isAttention) {
                 Dialog.confirm({
                    title: '提示',
                    message: '您确定要取消关注该用户吗？',
                    confirmButtonColor: 'rgba(242, 150, 0, 1)'
                }).then(() => {
                   let data = {
                    id:id,
                    token:this.token
                   }
                    addAuthorLikeApi(data).then((res)=>{
                        this.authorList[index].isAttention = !this.authorList[index].isAttention
                        this.$toast.success("已取消关注")
                    })
                    // this.$toast.success("取关成功")
                    
                }).catch(err => {
                    
                })
            }
        }),
        getDataSearch(){
            this.authorList = []
            this.current = 1
            this.finished = false
             this.getDataList()
        },
         // 跳转到主页
        gotoPersonal(item) {
            if (item.isOwn == 0) {//跳转到自己的个人主页
                this.$router.push({path: '/personalPage',query:{}})
            }else{//跳转到别人主页的个人主页
                this.$router.push({path: '/visitPersonal',query:{obj:JSON.stringify(item)}})
            }
        }
    }
}
</script>

<style lang="less" scoped>
.author{
    padding: 0 10px;
    width: 90%;
    margin: 0 auto;
    height: 100%;
    overflow-x: scroll;
    .author-list{
        border-bottom: 1px solid #f5f7fa;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: center;
        padding: 10px 0;
        font-size: 15px;
       .author-l{
            display: flex;
            align-items: center;
            height: 52px;
            .author-info{
                display: flex;
                flex-direction: column;
                width: 200px;
            
                .info-name{
                    margin-left: 10px;
                    font-size: 17px;
                    font-weight: 400;
                    letter-spacing: 0px;
                    line-height: 24.62px;
                    color: rgba(0, 0, 0, 1);
                }
            
            }
            .avatar {
                border: 1px solid #ebeef5;
                background-size: 100%;
                width: 52px;
                height: 52px;
                border-radius: 50%;
                opacity: 1;
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover
            }
       }
        .btn{
            background: #f29600;
            padding: 5px 7px;
            border-radius: 3px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            opacity: 0.9;
        }
        .btnFollow{
            background: #fff;
            padding: 5px 7px;
            border-radius: 3px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #000;
            opacity: 0.9;
            border: 1px solid #ccc;
        }
    }
    
}
    
</style>